<template>
  <div id="market">
    <ul class="Forum_box">
      <li>
        <h3>市场主体活跃度分析</h3>
        <p><span>2010-2018年</span><span>单位：百万元</span></p>
        <div class="echarts_box" ref="canvas_vitality">
          <div id="lastDiv">
          </div>
        </div>
      </li>
      <li>
        <h3>四地新增主体户数趋势分析</h3>
        <p><span>2010-2018年</span><span>单位：百万元</span></p>
        <div class="echarts_box" ref="canvas_tendency">
          <div id="firstDiv">
          </div>
        </div>

      </li>
      <!--<li>-->
      <!--<h3>市场主体活跃度分析</h3>-->
      <!--<p><span>2010-2018年</span><span>单位：百万元</span></p>-->
      <!--<div class="echarts_box" id="canvas_List">-->
      <!--</div>-->
      <!--</li>-->
    </ul>

  </div>
</template>
<style>
  ul.Forum_box{
    background-color: #eee;
  }
  ul.Forum_box li{
    margin-bottom:0.2rem;
    padding:0.3rem;
    background:#fff;
  }
  .echarts_box{
    width:auto;
    height:4rem;
    position:relative;
  }
  ul.Forum_box li h3{
    font-style: normal;
    margin-bottom:0.25rem;
  }
  ul.Forum_box li p{
    color:#adadad;
    font-size:0.22rem;
    margin-bottom:0.45rem;
  }
  ul.Forum_box li p span:first-child{
    margin-right:0.3rem;
  }
</style>
<script>
  import echarts from 'echarts'
//  var mapVitality = document.getElementById('canvas_vitality');
//  var mapTendency = document.getElementById('canvas_tendency')
    export default{
        data(){
            return {
              mapVitalityOpiton:{
                tooltip: {
                  trigger: 'axis',
                  backgroundColor: '#fff',
                  textStyle: {
                    color: '#333',
                  },
                  borderWidth: 1,
                  borderColor: '#ccc',
                  extraCssText: 'box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);',

                },
                legend: {
                  data: [],
                  left: 'center',
                  bottom: '5%',

                  itemWidth: 20,
                  itemHeight: 2,

                },
                grid: {
                  top: '3%',
                  left: '0%',
                  right: '0%',
                  bottom: '20%',
                  containLabel: true
                },
                toolbox: {

                },

                xAxis: [
                  {
                    type: 'category',
                    boundaryGap: false,
                    data: ['2010', 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018],
                    //minInterval: 0,
                    min: 'min',

                    //显示刻度线的设置
                    axisTick: {
                      show: false,
                    },
                    //显示刻度标标的设置
                    axisLabel: {
                      show: true,
                      interval: 1,
                      textStyle: {
                        //这里设置标签样式
                        color: '#a0a0a0'
                      }
                    },
                    splitLine: {
                      show: true,
                      interval: 0,

                    },

                  }
                ],
                yAxis: [
                  {
                    type: 'value',
                    boundaryGap: [0, '100%'],
                    axisTick: {
                      show: false,
                    },
                    splitLine: {
                      show: true,
                      interval: 0,
                    },
                    axisLabel: {
                      show: true,
                      textStyle: {
                        color: '#a0a0a0'
                      }
                    }

                  },

                ],
                // 区域缩放；
                series: []
              },
              mapTendencyOpiton:{
                tooltip: {
                  trigger: 'axis',
                  backgroundColor: '#fff',
                  textStyle: {
                    color: '#333',
                  },
                  borderWidth: 1,
                  borderColor: '#ccc',
                  extraCssText: 'box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);',
                  //position: postion(pos, params, dom, rect, size),
                },
                legend: {
                  data: [{name: '武汉', icon: 'roundRect'}, {name: '长沙', icon: 'roundRect'}, {
                    name: '合肥',
                    icon: 'roundRect'
                  }, {name: '南昌', icon: 'roundRect'}],
                  left: 'center',
                  bottom: '5%',
                  //width: 500,
                  itemWidth: 20,
                  itemHeight: 2,
                  //backgroundColor:'rgba(255,255,255)'

                  //itemBorderRadius: 8,
                },
                grid: {
                  top: '2%',
                  left: '0%',
                  right: '0%',
                  bottom: '20%',
                  containLabel: true
                },
                toolbox: {
                  //show : true,
//             feature : {
//                 mark : {show: true},
//                 dataView : {show: true, readOnly: false},
//                 magicType : {show: true, type: ['line', 'bar']},
//                 restore : {show: true},
//                 saveAsImage : {show: true}
//             }
                },
                xAxis: [
                  {
                    type: 'category',
                    boundaryGap: [0,'100%'],
                    data: [],
                    //minInterval: 0,
                    min: 'min',
                    //boundaryGap:[0,'100%'],
                    //max:'max',
//                 axisLine:{
//                 show:true,
////               onZero:false,
//                 lineStyle:{
//                 //color:'#333',
//                 type:'solid',
//                 }
//                 },
                    //显示刻度线的设置
                    axisTick: {
                      show: false,
                    },
                    //显示刻度标标的设置
                    axisLabel: {
                      show: true,
                      interval: 5,
                      textStyle: {
                        //这里设置标签样式
                        color: '#a0a0a0'
                      }
                    },
                    splitLine: {
                      show: true,
                      interval:1,
                      //分隔线样式设置；
                      //lineStyle:{

                      //}
                    },
//                 splitArea:{
//                     //show:true,
//                     interval:0,
//                     areaStyle:{
//                         //设置分隔区域样式
//                         //color:'#eee'
//                     }
//
//                 },

                  }
                ],
                yAxis: [
                  {
                    type: 'value',
                    boundaryGap: [0, '100%'],
                    axisTick: {
                      show: false
                    },
                    splitLine: {
                      show: true,
                      interval: 0
                    },
                    axisLabel: {
                      show: true,
                      textStyle: {
                        color: '#a0a0a0'
                      }
                    }

                  },

                ],
                // 区域缩放；
                series: [
                  {
                    name: '武汉',
                    type: 'line',
                    itemStyle: {
                      normal: {
                        color: '#eb869a'
                      }
                    },
                    symbol: 'circle',
                    symbolSize: 2,
                    //stack: '总量',
                    data: [20, 30, 100, 150, 200, 78, 50, 20, 30, 100, 150, 200, 78, 50, 20, 30, 100]
                  },
                  {
                    name: '长沙',
                    type: 'line',
                    //stack: '总量',
                    symbol: 'circle',
                    symbolSize: 2,
                    itemStyle: {
                      normal: {
                        color: '#f4ba8d'
                      }
                    },
                    data: [5, 30, 80, 40, 15, 5, 30, 80, 40, 15, 5, 30, 80, 40, 15, 5, 30, 80, 40, 15]
                  },
                  {
                    name: '合肥',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 2,
                    // stack: '总量',
                    itemStyle: {
                      normal: {
                        color: '#8be399'
                      }
                    },
                    data: [5, 30, 80, 40, 15, 5, 30, 80, 40, 15, 5, 30, 80, 40, 15, 5]
                  },
                  {
                    name: '南昌',
                    type: 'line',
                    //stack: '总量',
                    symbol: 'circle',
                    symbolSize: 2,
                    itemStyle: {
                      normal: {
                        color: '#87b7ef'
                      }
                    },
                    data: [5, 30, 80, 40, 15, 5, 15, 5, 30, 80, 40, 15, 5, 30, 80, 40, 15, 5, 30, 80, 40, 15, 5, 30, 80, 40, 15, 5, 30, 80, 40,]
                  }
                ]
              }
            }
        },
      methods:{
        echartAjax(urls,value,opitonType,els) {
         // console.log(mapVitality)
          $.ajax({
            url:urls,
            type: 'GET',
            //timeout: 100,
              dataType: 'JSON',
              data:value,
               success:(ret)=>{
              if (ret) {
               console.log
                if(opitonType == 2) {
                  var chartData = ret.chart1;
                  console.log(chartData)
                  this.mapTendencyOpiton.xAxis[0].data = chartData.date;
                  this.mapTendencyOpiton.series[0].data = chartData.wuhan;
                  this.mapTendencyOpiton.series[1].data = chartData.changsha;
                  this.mapTendencyOpiton.series[2].data = chartData.hefei;
                  this.mapTendencyOpiton.series[3].data = chartData.nanchang;
                  this.initEcharts(els, this.mapTendencyOpiton);

                }else if(opitonType == 1){
                  var lastData = ret.chart2;
                  console.log(lastData)
                  //alert(JSON.stringify(lastData));
                  this.mapVitalityOpiton.xAxis[0].data = lastData.xAxis;
                  var index = -1;

                  for (var its in lastData.series){
                    index++;
                    var legend;
                    var lineColor;
                    switch(its){
                      case "武汉":

                        legend = {name: '武汉', icon: 'roundRect'};
                        lineColor = '#eb869a';
                        break;
                      case "长沙":
                        legend = {name: '长沙', icon: 'roundRect'};
                        lineColor = '#f4ba8d';
                        break;
                      case "合肥":
                        legend = {name: '合肥', icon: 'roundRect'};
                        lineColor = '#8be399';
                        break;
                      case "南昌":
                        legend = {name: '南昌', icon: 'roundRect'};
                        lineColor = '#87b7ef';
                        break;
                    };
                    this.mapVitalityOpiton.legend.data.push(legend);
                    this.mapVitalityOpiton.series.push( {
                      name: its,
                      type: 'line',
                      itemStyle: {
                        normal: {
                          color:lineColor
                        }
                      },
                      symbol: 'circle',
                      symbolSize: 2,
                      stack: '总量',
                      data:lastData.series[its]
                    }) ;
                  }

                  this.initEcharts(els, this.mapVitalityOpiton);
                }
              }
            },
            error(err){
            console.log(err)
             }
          })
        },
        initEcharts(elem,options) {
          //console.log(elem)
          var Charts = echarts.init(elem)
            Charts.setOption(options, true);
            Charts.resize();

        }
      },
      mounted(){
        const elest = this.$refs.canvas_vitality
        const eleast = this.$refs.canvas_tendency
         const urls = '../static/data/echarts.json'
          const mapTendValues = { "secretCode": "zwy-811421-marketEchart2",
          "webName": "marketEchart2",
          "startDate": "2010-02",
          "endDate": "2012-05"};
        const mapVitalValues = {
          secretCode:"zwy-811421-marketEchart2",
          startTime:"2010",
          endTime:"2018",
          webName:"marketEchart2"
        };
       //console.log(this.$refs.canvas_vitality)
        this.echartAjax(urls,mapVitalValues,1,elest);
        this.echartAjax(urls,mapTendValues,2,eleast);
      },


    }

</script>
